<template>
  <view class="nv_file_preview">
    <view>
      <view :class="{'nv_file_preview_box':true,'nv_file_preview_box_small':size==='small'}" v-if="getFileType('1')" @click.stop="imagePreview">
        <img :src="$getFilePath(path)" class="pre-img"/>
        <view class="nv_file_preview_del" v-if="!isPreview">
          <img src="@/static/image/icon_delete.png" class="icon_delete" @click.stop="delFile"/>
        </view>
      </view>
      <view :class="{'nv_file_preview_box':true,'nv_file_preview_box_small':size==='small'}" v-if="fileType==='upload'" @click="uploadClick">
        <div style="display: flex;flex-direction: column;justify-content:center;align-items: center;gap: 6px">
          <van-icon name="plus" size="26"/>
          <span style="font-size: 14px">点击上传</span>
        </div>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    name:'NeFilePreview',
    data(){
      return{
        show:false,
      }
    },
    props:{
      fileType:{
        type:String,
        default:''
      },
      path:{
        type:String,
        default:''
      },
      isPreview:{
        type:Boolean,
        default:false
      },
      fileName:{
        type:String,
        default:''
      },
      fileUrl:{
        type:String,
        default:''
      },
      size:{
        type:String,
        default:'default'
      },
    },
    methods:{
      uploadClick() {
        this.$emit('click')
      },
      delFile() {
        this.$emit('delFile')
      },
      imagePreview() {
        this.$emit('imagePreview')
      },
      getFileType(type) {
        let fileTypeList_1 = ['image/png','image/jpg','image/jpeg','png','jpg','image']
        let fileName = this.fileName.split('.').pop()
        let fileUrl = this.fileUrl.split('.').pop()
        let path = this.path.split('.').pop()
        if(type === '1') {
          return fileTypeList_1.includes(this.fileType) || fileTypeList_1.includes(fileName) || fileTypeList_1.includes(fileUrl) || fileTypeList_1.includes(path)
        }
      }
    }
  }
</script>
<style lang="less" scoped>
  .nv_file_preview{
    margin-left: 10px;
    &:first-child{
      margin-left: 0;
    }
    .nv_file_preview_box{
      width: 90px;
      height: 90px;
      border-radius: 10px;
      background: #F5F5F5;
      display: flex;
      justify-content: center;
      align-items: center;
      position: relative;
      .pre-img{
        width: 100%;
        height: 100%;
        border-radius: 10px;
      }
      .pre-icon{
        width: 24px;
        height: 24px;
      }
      .nv_file_preview_video{
        position: absolute;
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 100%;
        img{
          width: 30px;
          height: 30px;
        }
      }
      .nv_file_preview_del{
        height: 20px;
        width: 100%;
        position: absolute;
        bottom: 0;
        border-radius: 0 0 10px 10px;
        background:rgba(131, 178, 133, 0.5);
        display: flex;
        justify-content: center;
        align-items: center;
        .icon_delete{
          width: 14px;
          height: 14px;
        }
      }
    }
    .nv_file_preview_box_small{
      width: 40px;
      height: 40px;
      border-radius: unset;
      .pre-img{
        width: 100%;
        height: 100%;
      }
      .pre-icon{
        width: 18px;
        height: 18px;
      }
      .nv_file_preview_del{
        height: 10px;
        .icon_delete{
          width: 6px;
          height: 6px;
        }
      }
    }
  }
  .nv_file_preview_list_box{
    margin-bottom: 8px;
    border-radius: 4px;
    .nv_file_preview_list{
      border-radius: 4px;
      width: 100%;
      height: 50px;
      background-color: #F5F5F5;
      display: flex;
      align-items: center;
      padding: 0 16px;
      .pre_list-img{
        width: 30px;
        height: 30px;
      }
      .pre_list-text{
        font-size: 14px;
        flex: 1;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        margin: 0 12px;
      }
      .pre_list-add-text{
        color: #666666;
        font-size: 14px;
        margin: 0 12px;
      }
    }
    .list-chakan{
      color: @ne-color-primary;
    }
  }
  .wrapper{
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
  }
</style>
